import React from 'react';
import { Card, Table, Tag, Button, Typography, Statistic, Row, Col } from 'antd';
import { 
  PlayCircleOutlined, 
  FileTextOutlined,
  ArrowUpOutlined
} from '@ant-design/icons';

const { Title, Text } = Typography;

const interviews = [
  {
    id: 1,
    position: '算法工程师',
    company: '字节跳动',
    date: '2024-02-28',
    duration: '45分钟',
    score: 89,
    status: '已完成'
  },
  {
    id: 2,
    position: '前端开发工程师',
    company: '阿里巴巴',
    date: '2024-02-27',
    duration: '38分钟',
    score: 92,
    status: '已完成'
  },
  {
    id: 3,
    position: '后端开发工程师',
    company: '腾讯',
    date: '2024-02-26',
    duration: '42分钟',
    score: 85,
    status: '已完成'
  }
];

const columns = [
  {
    title: '职位',
    dataIndex: 'position',
    key: 'position',
  },
  {
    title: '公司',
    dataIndex: 'company',
    key: 'company',
  },
  {
    title: '面试日期',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '时长',
    dataIndex: 'duration',
    key: 'duration',
  },
  {
    title: '得分',
    dataIndex: 'score',
    key: 'score',
    render: (score) => (
      <Tag color={score >= 90 ? 'success' : score >= 80 ? 'processing' : 'warning'}>
        {score}分
      </Tag>
    )
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render: (status) => (
      <Tag color="success">{status}</Tag>
    )
  },
  {
    title: '操作',
    key: 'action',
    render: () => (
      <Button type="link" icon={<FileTextOutlined />}>
        查看报告
      </Button>
    )
  }
];

export default function Report() {
  return (
    <div>
      <Card>
        <Title level={4}>面试记录</Title>
        <Text type="secondary" style={{ marginBottom: 24, display: 'block' }}>
          查看您的历史面试记录和详细分析报告
        </Text>

        {/* 统计数据 */}
        <Row gutter={24} style={{ marginBottom: 24 }}>
          <Col span={6}>
            <Card bordered={false}>
              <Statistic
                title="累计面试次数"
                value={12}
                prefix={<PlayCircleOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card bordered={false}>
              <Statistic
                title="平均得分"
                value={85}
                suffix="分"
                prefix={<ArrowUpOutlined />}
                valueStyle={{ color: '#3f8600' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card bordered={false}>
              <Statistic
                title="总训练时长"
                value={26.5}
                suffix="小时"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card bordered={false}>
              <Statistic
                title="本周面试"
                value={3}
                suffix="次"
              />
            </Card>
          </Col>
        </Row>

        {/* 面试记录表格 */}
        <Table
          columns={columns}
          dataSource={interviews}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: (total) => `共 ${total} 条记录`
          }}
        />
      </Card>
    </div>
  );
} 